<!--  -->
<template>
  <div class="borr-detail">
    <h2 class="title">日志详情：</h2>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 1000px"
    >
      <el-table-column type="index" label="序号" width="50" align="center" />

      <el-table-column label="类型" align="center" prop="classification" />
      <el-table-column label="当事人" align="center" prop="borrowers" />
      <el-table-column label="办理时间" align="center" prop="name" />
      <el-table-column label="经办人" align="center" prop="createBy" />
      <el-table-column label="操作" fixed="right" align="center" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="lookDetail(scope.row)" type="text"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="detail-part" v-if="detail">
      <h2 class="title">详情：</h2>
      <div class="detail">
        <div class="detail-info">
          <h2>借阅人姓名：</h2>
          <span>{{ detail.borrowers }}</span>
        </div>
        <div class="detail-info">
          <h2>借阅人身份证号：</h2>
          <span>{{ detail.idCard }}</span>
        </div>
        <div class="detail-info">
          <h2>借阅人联系方式：</h2>
          <span>{{ detail.contactInformation }}</span>
        </div>
        <div class="detail-info">
          <h2>借阅人类型：</h2>
          <span>{{ detail.type }}</span>
        </div>
        <div class="detail-info">
          <h2>借阅事由：</h2>
          <span>{{ detail.reason }}</span>
        </div>
      </div>
      <div class="detail-info">
        <h2 style="float: none">借阅凭证：</h2>
        <el-image
          v-for="item in detail.borrowEvidenceList"
          :key="item.id"
          style="width: 160px; height: 160px"
          :src="item.fileShowPath"
          :preview-src-list="srcList"
          class="pic-list"
        >
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
import { borrowList, borrowInfo } from "@/api/files/basics";
export default {
  components: {},
  props: ["arcPersonnelId"],
  data() {
    return {
      loading: false,
      tableData: [],
      srcList: [],
      detail: null,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    getBorrowList() {
      let arcPersonnelId = this.arcPersonnelId;
      borrowList(arcPersonnelId).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data;
        }
      });
    },
    lookDetail(row) {
      borrowInfo(row.id).then((res) => {
        if (res.code == 200) {
          this.detail = res.data;
          let srcList = [];
          if (
            this.detail.borrowEvidenceList &&
            this.detail.borrowEvidenceList.length > 0
          ) {
            this.detail.borrowEvidenceList.forEach((item) => {
              srcList.push(item.fileShowPath);
            });
            this.srcList = srcList;
          }
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getBorrowList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.borr-detail {
  padding: 20px;
}
h2 {
  font-size: 16px;
  padding: 0;
  margin: 0 0 10px 0;
}
.detail-part {
  margin-top: 30px;
}
.title {
  color: rgb(57, 188, 244);
}
.detail {
  clear: both;
  overflow: hidden;
}
.detail-info {
  float: left;
  margin-right: 16px;
  font-size: 16px;
  margin-bottom: 16px;

  > h2 {
    float: left;
    margin-bottom: 0px;
    line-height: 28px;
  }
  > span {
    float: left;
    line-height: 28px;
  }
}
.pic-list {
  margin: 0 10px 10px 0;
}
</style>